<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 1px solid #e9e9e9;
            /* border-collapse: collapse 为表格设置合并边框模型*/
            border-collapse: collapse;
            /* border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式） */
            border-spacing: 0;
            margin: 100px auto;
            margin-bottom: 0px;
        }

        p {
            margin-left: 31%;
        }

        th,
        td {
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: center;
        }

        th {
            background-color: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
        }
    </style>
    <!-- 引入 vue.js 文件 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-if="books.length">
            <table>
                <!-- 列表头部 -->
                <thead>
                    <!-- tr 行 -->
                    <tr>
                        <!-- td 列 -->
                        <td>编号</td>
                        <td>书籍名称</td>
                        <td>出版日期</td>
                        <td>价格</td>
                        <td>购买数量</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <!-- 列表内容 -->
                <tbody>
                    <!-- tr 行 -->
                    <tr v-for="(item,index) in books">
                        <td> {{index+1}} </td>
                        <td> {{item.name}} </td>
                        <td> {{item.data}} </td>
                        <!-- | 使用vue过滤器 后面跟函数 -->
                        <td> ￥{{item.price | showPrice}} </td>
                        <td>
                            <button @click="decrement(index)" :disabled="item.count <= 1">-</button>
                            {{item.count}}
                            <button @click="increment(index)">+</button>
                        </td>
                        <td><button @click="removeBtn(index)">移除</button></td>
                    </tr>
                </tbody>
            </table>
            <p>总价格： ￥{{totalPrice | showPrice}} </p>
        </div>
        <div v-else>
            <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fa4064bdab5f6c800ed664014f3eb7d13a4dd25b3138d0-hYHe07_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621668176&t=b263b5acce6b4a0fb6ffbe687d10101f">
            <h2>购物车为空</h2>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                books: [
                    {
                        id: 1,
                        name: "《算法导论》",
                        data: "2006-2",
                        price: 85.00,
                        count: 1
                    },
                    {
                        id: 2,
                        name: "《Unix编程艺术》",
                        data: "2006-1",
                        price: 59.00,
                        count: 1
                    },
                    {
                        id: 3,
                        name: "《html编程》",
                        data: "2002-7",
                        price: 69.00,
                        count: 1
                    },
                    {
                        id: 4,
                        name: "《java编程》",
                        data: "2000-9",
                        price: 89.00,
                        count: 1
                    },
                    {
                        id: 5,
                        name: "《c++编程》",
                        data: "2004-5",
                        price: 80.00,
                        count: 1
                    },
                ]
            },
            // filters 过滤器 里面放函数
            filters: {
                showPrice(price) {
                    return price.toFixed(2)
                }
            },
            // 点击事件
            methods: {
                // decrement 点击减一
                decrement(index) {
                    this.books[index].count--;

                },
                // increment 点击加一
                increment(index) {
                    this.books[index].count++;
                },
                removeBtn(index) {
                    //splice(第几个开始，删除几个，替换元素)
                    this.books.splice(index, 1);
                }
            },
            // 计算属性
            computed: {
                totalPrice() {
                    // let totalPrice = 0;
                    // for (let i = 0; i < this.books.length; i++) {
                    //     totalPrice = totalPrice + this.books[i].price * this.books[i].count;
                    // }
                    // return totalPrice;

                    // 2. for(let i in this.books)
                    // let totalPrice = 0;
                    // for (let i in this.books) {
                    //     totalPrice = totalPrice + this.books[i].price * this.books[i].count;
                    // }
                    // return totalPrice;

                    // 3. for(let i of this.books)
                    // let totalPrice = 0;
                    // for (let item of this.books) {
                    //     totalPrice += item.price * item.count;
                    // }
                    // return totalPrice;

                    // 4. reduce js高阶函数
                    return this.books.reduce(function (preValue, book) {
                        return preValue + book.price * book.count;
                    }, 0)
                }
            }
        });
    </script>
</body>

</html>